<style lang="less">
</style>

<template>
    <div class="user-list-view">
        <Card>
            <span slot="title">订单列表</span>
            <span slot="extra">
                <!--<Button type="success" size="small" @click="">导出到cvs文件</Button>-->
                <!--<Button type="success" size="small" @click="">导出到excel文件</Button>-->
                <Button size="small" type="success" @click="getList"><Icon type="loop"></Icon>刷新列表</Button>
            </span>

            <Form label-position="left" label-width="80" inline>
                <Row>
                    <AgentSelect size="small" :agent-id.sync="search.parent_agent_id" @on-change="agentSelectChange"></AgentSelect>
                    <FormItem label-width="0">
                        <Input style="width: 190px;" size="small" placeholder="订单编号/设备编号/直属代理商"
                               v-model="search.keyword"></Input>
                    </FormItem>
                    <FormItem label="订单状态：">
                        <Select size="small" v-model="search.status" placeholder="订单状态">
                            <Option value="">全部</Option>
                            <Option value="wait_pay">待支付</Option>
                            <Option value="service">服务中</Option>
                            <Option value="success">交易成功</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="支付方式：">
                        <Select size="small" v-model="search.pay_type" placeholder="支付方式">
                            <Option value="">全部</Option>
                            <Option value="balance">余额支付</Option>
                            <Option value="score">积分支付</Option>
                        </Select>
                    </FormItem>
                    <FormItem label-width="0">
                        <Button type="success" :loading="searchLoading" size="small" icon="ios-search"
                                @click="handleSearch">筛选
                        </Button>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="消费时间段:">
                        <DatePicker size="small" @on-change="handleChangeDate" type="datetimerange" placeholder="请选择时间段"
                                    style="width:260px"></DatePicker>
                    </FormItem>
                </Row>
            </Form>

            <Row>
                <Col>
                <Table border :loading="loading" height="450" :context="self" :columns="columns" :data="data"></Table>
                </Col>
            </Row>
            <Row style="padding: 5px 0">
                <Col>
                <Page ref="Page"
                      :total="page.total"
                      :size="page.size"
                      :current.sync="page.current"
                      @on-change="handleChangePage"
                      @on-page-size-change="handleChangePageSize"
                      :page-size-opts="page.sizes" show-sizer show-elevator></Page>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import AgentSelect from '../public/AgentSelect.vue';

    export default {
        components: {
            AgentSelect
        },
        data() {
            return {
                self: this,

                loading: false,

                page: {
                    total: 0,
                    current: 1,
                    size: 10,
                    sizes: [10, 30, 50, 100],
                },

                searchLoading: false,
                search: {
                    parent_agent_id: '',
                    keyword: '',
                    created_at: '',
                    pay_type: '',
                    status: ''
                },

                columns: [
                    {
                        title: '订单编号',
                        key: 'order_sn',
                        fixed: 'left',
                        width: 210,
                    },
                    {
                        title: '下单用户',
                        key: 'username',
                        width: 150,
                    },
                    {
                        title: '直属代理',
                        key: 'agent_name',
                        width: 150,
                    },
                    {
                        title: '订单状态',
                        key: 'status_text',
                        width: 150,
                    },
                    {
                        title: '订单金额',
                        key: 'order_money',
                        width: 150,
                        align: 'center'
                    },
                    {
                        title: '实付金额',
                        key: 'real_pay_money',
                        width: 150,
                        align: 'center'
                    },
                    {
                        title: '消费时长',
                        key: 'consume_duration',
                        width: 120,
                        align: 'center'
                    },
                    {
                        title: '设备编号',
                        key: 'device_sn',
                        width: 210,
                    },
                    {
                        title: '设备插口',
                        key: 'port',
                        width: 150,
                    },
                    {
                        title: '开始时间',
                        key: 'service_start_at',
                        width: 150,
                    },
                    {
                        title: '结束时间',
                        key: 'service_end_at',
                        width: 150,
                    },
                    {
                        title: '下单时间',
                        key: 'created_at',
                        width: 150,
                    },
                    {
                        title: '设备地址',
                        key: 'device_address',
                        width: 250,
                    },
                    {
                        title: '支付详情',
                        key: 'payments',
                        width: 900,
                        align: 'center'
                    }
                ],
                data: []
            }
        },

        mounted () {
            this.getList();
        },

        created () {
            this.initColumn();
        },

        methods: {
            handleChangeDate (date) {
                console.log(date);
                if (date[1] != undefined) {
                    this.search.created_at = date;
                } else {
                    this.search.created_at = [];
                }
            },

            initColumn () {
                let vm = this;

                this.columns.forEach(item => {
                    if (item.key == 'port') {
                        item.render = (h, param) => {
                            return h('span', {}, '插口' + param.row.port.substr(1));
                        };
                    }

                    if (item.key == 'order_money') {
                        item.render = (h, param) => {
                            return h('span', {}, param.row.order_money + ' 元');
                        };
                    }

                    if (item.key == 'consume_duration') {
                        item.render = (h, param) => {
                            return h('span', {}, param.row.consume_duration + ' 分钟');
                        };
                    }

                    if (item.key == 'payments') {
                        item.render = (h, param) => {
                            if (param.row.payment.length > 0) {
                                let tr = [];

                                tr.push(h('tr', {}, [
                                    h('th', { style: {'text-align': 'center'} }, '支付单号'),
                                    h('th', { style: {'text-align': 'center'} }, '支付方式'),
                                    h('th', { style: {'text-align': 'center'} }, '金额(元)/积分(个)'),
                                    h('th', { style: {'text-align': 'center'} }, '支付状态'),
                                    h('th', { style: {'text-align': 'center'} }, '支付时间'),
                                ]));

                                for (let i in param.row.payment) {
                                    tr.push(h('tr', {}, [
                                        h('td', { style: {'text-align': 'center'} }, param.row.payment[i].payment_sn),
                                        h('td', { style: {'text-align': 'center'} }, param.row.payment[i].pay_mode_text),
                                        h('td', { style: {'text-align': 'center'} }, param.row.payment[i].money),
                                        h('td', { style: {'text-align': 'center'} }, param.row.payment[i].status_text),
                                        h('td', { style: {'text-align': 'center'} }, param.row.payment[i].paid_at),
                                    ]));
                                }

                                return h('table', { 'class': 'ivu-table', style: { width: '100%' } }, tr);
                            } else {
                                return h('div', { style: {'text-align': 'center'} }, '未支付');
                            }
                        };
                    }

                    if (item.key == 'prorations') {
                        item.render = (h, param) => {
                            let {keys, values, entries} = Object;

                            let labels = [];
                            for (let [i, value] of entries(param.row.prorations)) {
                                if (i == 'v0') {
                                    labels.push(h('div', {}, '平台抽取：' + value + '%'));
                                } else {
                                    labels.push(h('div', {}, i.substr(1) + '级代理：' + value + '%'));
                                }

                            }
                            return h('div', { style: {padding: '10px 0'} }, labels);
                        };
                    }
                });
            },

            getList() {
                this.loading = true;
                this.searchLoading = true;

                let params = {
                    page: this.page.current,
                };
                params = Object.assign(params, this.search);

                util.api().get(`/admin/api/orders`, {
                    params,
                    headers: {
                        pageSize: this.page.size,
                    }
                }).then((resp) => {
                    this.$Message.destroy();
                    if (resp.data.status == true) {
                        this.data = resp.data.data;
                        this.page.total = resp.data.meta.total;
                        this.page.current = resp.data.meta.current_page;
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                    this.loading = false;
                    this.searchLoading = false;
                }).catch((e) => {
                    util.handleApiException(e, this, '获取设备列表失败');
                    this.searchLoading = false;
                })
            },

            handleSearch() {
                this.page.current = 1;
                this.getList();
            },

            handleChangePage(page) {
                this.page.current = page;
                this.getList();
            },

            handleChangePageSize(size) {
                this.page.size = size;
                this.getList();
            },

            agentSelectChange (value) {
                console.log(value);
                this.search.parent_agent_id = value;
            }
        }
    };
</script>
